<template>
    <div class="">
        <div class="listBox_head">
            <el-button type="primary" plain @click="jumpAdd">添加新门店</el-button>
        </div>
        <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
            @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange">
            <template v-slot:status="{ scope }">
                <dict-tag :options="statusLs" :value="scope.row.status" />
            </template>
            <template v-slot:operate="{ scope }">
                <el-button v-if="scope.row.status == 3" @click="editDetail(scope.row.id)"
                    size="small">编辑</el-button>
                <el-button type="primary" size="small" @click="lookMerchant(scope.row.id)"
                    v-if="scope.row.status != 3">查看</el-button>
            </template>
        </ex-table>
        <addNewShop v-if="detailDialog" :visible.sync="detailDialog" :type="detailType" :id="id" @success="_handleSuccess"></addNewShop>
    </div>
</template>
<script>
// components
import {
    chainShopApplyLs,
} from "@/api/syChainManagement/syChainManagement.js";
import handlePageMixin from "@/mixins/handlePageMixin";
import addNewShop from "./components/addNewShop"
export default {
    components: {
        addNewShop
    },
    mixins: [handlePageMixin],
    data() {
        return {
            detailType:'add',
            loading: false,
            formInline: {
                businessLicence: "", //营业执照
                chainType: "", //连锁类型 1 直营店 2加盟店
                proceedsType: "", //收款类型 1 总部收款 2门店收款
            },
            statusLs:[],//状态字典
            chainId: "", //总店id
            detailDialog: false,
            id: '',
            tableData: [],
            tableColumn: [
                { prop: "merchantName", label: "商户账号名称" },
                { prop: "shopName", label: "店铺名称" },
                { prop: "businessLicenseNumber", label: "营业执照代码" },
                { prop: "applyTime", label: "申请时间" },
                { slot: true, slot: true, slotName: "status", label: "进件状态" },
                {
                    label: "操作",
                    slot: true,
                    slotName: "operate",
                    width: "200",
                    fixed: "right",
                },
            ],

        };
    },
    created() {
        this.chainId = this.$route.query.id;
        this.getDict();
        this.getList();
    },
    computed: {},
    methods: {
        //获取字典
        getDict() {
            var dictType = "merchant_chain_shop_apply_status";
            this.$getSelectList(dictType)
                .then((res) => {
                    this.statusLs = res.result[0].dictList;
                })
        },
        
        // 获取列表
        getList() {
            const params = {
                ...this.pageOptions,
                chainId: this.chainId,
            };
            this.loading = true;
            chainShopApplyLs(params)
                .then((res) => {
                    const { total, records } = res.result;
                    this.$refs.table.pageOptions.total = total;
                    this.tableData = records;
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        // 新增
        jumpAdd() {
            this.detailType = 'add'
            this.detailDialog = true
        },
        //编辑门店
        editDetail(merchantId) {
            this.id = merchantId
            this.detailType = 'edit'
            this.detailDialog = true
        },
        //查看
        lookMerchant(merchantId) {
            this.id = merchantId
            this.detailType = 'watch'
            this.detailDialog = true
        },
        _handleSuccess() {
            this.getList();
        },
    },
};
</script>
  
<style lang="scss" scoped>
.listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px 20px;
    margin-top: 10px;
}

.table_list {
    display: flex;
    align-items: center;
    // border: 1px solid #DCDFE6;
    border-radius: 7px;
    width: 220px;
    margin-bottom: 10px;
}

.tableBox {
    width: calc(100% / 3);
    height: 36px;
    text-align: center;
    line-height: 36px;
    color: #303133;
    font-size: 14px;
    border: 1px solid #dcdfe6;
    border-right: 0;
}

.tableBox:first-child {
    border-radius: 7px 0px 0px 7px;
}

.tableBox:last-child {
    border-right: 1px solid #dcdfe6;
    border-radius: 0px 7px 7px 0px;
}

.spchoosetext {
    background-color: #fff4e6;
    color: #ff9300;
    // border: 1px solid #ff9300;
}

.listBox_head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;

}

.el-select .el-input {
    width: 130px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}

.head ::v-deep.el-input-group__prepend {
    width: 110px !important;
}
</style>
  